<template>
  <div id="articles" >
    <van-sticky :offset-top="35">
      <van-button
        icon="arrow-left"
        round
        type="primary"
        color="#666"
        size="small"
        class="button"
        @click="goBack"
      />
    </van-sticky>

    <div class="textNav">
      <div class="imgBox">
        <img class="img" :src="img" />
      </div>
      <div class="title">
        <span>{{ title }}</span>
      </div>
      <div v-if="subtitle" class="subtitle">
        <span>{{ subtitle }}</span>
      </div>
      <div class="body">
        <span>{{ body }}</span>
      </div>

      <div class="agopageSub" v-for="item in NavArr" :key="item.id">
        <img v-if="item.image" :src="item.image.url" />
        <div class="annotation">
          {{ item.image_annotation }}
        </div>
        <div class="agopageSub-title">
          {{ item.title }}
        </div>
        <div class="agopageSub-content">
          {{ item.content }}
        </div>
      </div>

      <div class="end">·THE END·</div>
    </div>

    <div class="recommend">
      <div class="recommend-title">
        <span>|</span>为你推荐
        <van-button
          icon="replay"
          round
          type="primary"
          color="#3EAD3E"
          size="small"
          @click="recommendData"
        />
      </div>
      <TryLikeComponents :choseArr="choseArr" :id="id" @changeId="changeId" />
    </div>

    <div class="comment">
      <div class="comment-title"><span>|</span>听他们说</div>

      <CommentComponents :commentArr="commentArr" />
    </div>

    <UserComponents 
    :commentArr="commentArr" :value="value" @changeArr='Usercomment'
    :id="id"
    :img="img"
    :title="title"
    :body="body"
    />
  </div>
</template>
<script>
import CommentComponents from "@/components/CommentComponents.vue";
import TryLikeComponents from "@/components/TryLikeComponents.vue";
import UserComponents from "@/components/UserComponents.vue";
import { debounce } from "lodash-es";

export default {
  data() {
    return {
      id: "",
      NavArr: [],
      body: "",
      title: "",
      subtitle: "",
      img: "",
      morePageArr: [],
      choseArr: [],
      isExit: [],
      count: 0,
      commentArr: [],
      value:''
    };
  },
  created() {
    this.getID = debounce(this.getID);
    this.getTextData = debounce(this.getTextData);
  },
  mounted() {
    this.getID();
    this.getTextData();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getID() {
      let { id } = this.$route.params;

      this.id = id;
    },
    getTextData() {
      this.$axios
        .get(
          `http://cloud.agopage.com/6b83fd3bc06260ec/agopageDetail?agopageId=${this.id}`
        )
        .then(({ data }) => {
          this.body = data.agopage.body;
          this.title = data.agopage.title;
          this.subtitle = data.agopage.subtitle;
          this.img = data.agopage.image;
          this.NavArr = data.agopageSub;
          this.morePageArr = data.morePage;
          let arrId = this.id
          if (localStorage.getItem(arrId)) {
              console.log(arrId);
              let userArr =  JSON.parse(localStorage.getItem(arrId))
              this.commentArr = [...data.comment,...userArr] 
          }else {
            this.commentArr = data.comment;
          }
          this.recommendData();
        });
    },
    recommendData() {
      this.isExit = [];
      this.choseArr = [];
      this.count = 0;
      while (this.count < 3) {
        let num = Math.floor(Math.random() * 12);
        if (this.isExit.indexOf(num) === -1) {
          this.count++;
          this.choseArr = [...this.choseArr, this.morePageArr[num]];
        }
        this.isExit = [...this.isExit, num];
      }
    },
    changeId(objectId) {
      this.id = objectId;
      this.getTextData();
    },
    Usercomment(arr) {
       let newArr = JSON.stringify(arr)
       localStorage.setItem(this.id, newArr)
       this.commentArr = [...this.commentArr,...arr]
    }
  },
  components: {
    TryLikeComponents,
    CommentComponents,
    UserComponents,
  },
};
</script>

<style lang="scss" scoped>
#articles {
  position: relative;
  width: 100vw;
  min-height: 100vh;
}
.button {
  margin-left: 10vw;
}

.textNav {
  width: 100vw;
  min-height: 25vh;

  .imgBox {
    position: absolute;
    top: 0;
    width: 100vw;

    .img {
      width: 100%;
    }
  }

  .title {
    margin: 220px 0 2vh;
    padding-left: 5vw;

    span {
      display: inline-block;
      font-size: 18px;
      font-weight: 700;
    }
  }

  .subtitle {
    margin: 5vh 0;
    padding-left: 5vw;

    span {
      display: inline-block;
      font-size: 14px;
      font-weight: 700;
    }
  }

  .body {
    margin: 5vh 0;
    width: 90vw;
    padding-left: 5vw;

    span {
      display: inline-block;
      font-size: 14px;
      //   white-space: pre-wrap;
      //   word-wrap: break-word;
      //   -webkit-box-orient: vertical;
    }
  }

  .agopageSub {
    width: 100vw;

    img {
      display: block;
      margin: 0 auto 2vh;
      width: 80vw;
    }

    .annotation {
      width: 90vw;
      margin: 0 auto;
      text-align: center;
      font-size: 14px;
    }

    .agopageSub-title {
      width: 90vw;
      margin: 5vh auto;
      font-size: 14px;
      font-weight: 700;
    }

    .agopageSub-content {
      width: 90vw;
      margin: 0 auto 5vh;
      font-size: 14px;
      white-space: pre-wrap;
      word-wrap: break-word;
      -webkit-box-orient: vertical;
    }
  }

  .end {
    border-bottom: 3px solid #888888;
    padding: 10px 0;
    width: 95vw;
    font-size: 12px;
    color: #888888;
    text-align: right;
  }
}

.recommend {
  margin-top: 5vh;
  width: 100vw;

  button {
    margin-right: 5vw;
    float: right;
  }

  .recommend-title {
    padding-left: 5vw;
    line-height: 33px;
    font-size: 20px;
    font-weight: 700;

    span {
      display: inline-block;
      margin-right: 10px;
      font-weight: bolder;
      color: rgba(62, 173, 62, 0.731);
    }
  }
}

.comment {
  margin-top: 5vh;
  width: 100vw;
  margin-bottom: 50px;
  .comment-title {
    padding-left: 5vw;
    padding-bottom: 10px;
    line-height: 33px;
    font-size: 20px;
    font-weight: 700;
    border-bottom: 1px solid rgba(51, 51, 51, 0.1);

    span {
      display: inline-block;
      margin-right: 10px;
      font-weight: bolder;
      color: rgba(62, 173, 62, 0.731);
    }
  }

}
</style>